<template>
  <div class="order-logs">
    <el-timeline v-loading="loading" :reverse="false">
      <el-timeline-item v-for="(log, index) in logs" :key="index" :timestamp="''">
        <div class="created_time">{{ log.createTime }}</div>
        <div class="block">
          <el-image
            v-for="fit in log.credentials"
            :key="fit"
            style="width: 100px; height: 100px"
            :src="fit"
            :preview-src-list="log.credentials"
            :z-index="999999999"
          />
        </div>
        <div v-if="log.remark" class="remark_box">
          <el-form-item label prop="remark" label-width="0">
            <el-input v-model="log.remark" type="textarea" class="col" disabled />
          </el-form-item>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    datalogs: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    logs: function() {
      const logs = JSON.parse(JSON.stringify(this.datalogs))
      if (logs != null) {
        logs.map(val => {
          val.credentials = JSON.parse(val.credentials)
        })
      }
      return logs
    }
  },
  created() {},
  methods: {}
}
</script>
<style scoped>
.order-logs {
  padding-top: 20px;
  position: absolute;
  z-index: 1;
  width: 100%;
  font-size: 12px;
  overflow-y: auto;
  height: 230px;
}
.created_time {
  padding: 10px 0;
}
.remark_box {
  margin-top: 10px;
}
.el-image-viewer__wrapper {
  z-index: 3000 !important;
}
</style>
<style >
.el-tabs__nav {
  z-index: 0 !important;
}
</style>
